<template>
    <div class="container">
        <a-row class="dictionary">
            <a-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" class="dictionary-list">
                <yl-dict-filter @onSubmit="handleInit" @onReset="handleReset" hideEnabled></yl-dict-filter>
                <yl-multi-button-vue
                    :selectedRowKeys="selectedRowKeys"
                    @add="handleAddType"
                    @multiDelete="handleMultiDelete"
                    :hideAdd="true"
                    :hideDelete="true"
                ></yl-multi-button-vue>
                <yl-list-table @handleCustomRow="handleSelectedChange" ref="child"></yl-list-table>
            </a-col>
            <a-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13" class="dictionary-detail">
                <yl-detail-table :checkedDict="checkedDict"></yl-detail-table>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';

import ylDictFilter from './components/dictFilter.vue';
import ylMultiButtonVue from '@/components/ylMultiButton.vue';
import ylListTable from './components/listTable/index.vue';
import ylDetailTable from './components/detailTable/index.vue';

import listTables from './components/listTable/listTables';
import useDelete from './components/listTable/useDelete';
import { handleInitTable, handleResetTable } from './components/listTable/initListTable';

export default defineComponent({
    name: 'dict',
    components: {
        ylDictFilter,
        ylMultiButtonVue,
        ylListTable,
        ylDetailTable,
    },
    setup() {
        const child = ref();
        const state = reactive({
            checkedDict: {},
        });
        const { handleAddType, selectedRowKeys, tableQuery } = listTables;
        const { handleMultiDelete } = useDelete();

        const handleSelectedChange = (dict: NormalObj) => {
            state.checkedDict = dict;
        };
        const handleInit = (query) => {
            handleInitTable(query);
        };
        // 重置
        const handleReset = () => {
            handleResetTable(tableQuery);
        };
        return {
            handleInit,
            handleReset,
            handleAddType,
            selectedRowKeys,
            handleMultiDelete,
            handleSelectedChange,
            ...toRefs(state),
        };
    },
});
</script>

<style lang="scss" scoped>
.container {
    .dictionary {
        @include flex;
        justify-content: space-between;
        &-list {
            min-width: 490px;
            padding: $width20;
            margin-bottom: $width10;
            @include border;
            box-shadow: $boxShadow;
        }
        &-detail {
            min-width: 520px;
            padding-left: $width10;
        }
    }
}
</style>
